<template>
  <div>
    <v-chart
      ref="canvas"
      class="chart"
      :option="chartOption"
      :autoresize="true"
      @click="handleChartClick"
    />
    <a-modal v-model:open="showModal" class="custom-bar-chart-modal">
      <template #title> 图表详情 </template>
      <slot name="modalContent" :chartData="currentData" />
    </a-modal>
  </div>
</template>

<script>
import { toRefs, computed, ref } from "vue";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import VChart, { THEME_KEY } from "vue-echarts";
import { BarChart } from "echarts/charts";
import {
  GridComponent,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";

use([
  CanvasRenderer,
  GridComponent,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

export default {
  name: "BarChart",
  components: { VChart },
  provide: { [THEME_KEY]: "light" },
  props: {
    option: { type: Object, default: () => ({}) },
  },
  setup(props) {
    const { option } = toRefs(props);
    const showModal = ref(false);
    const currentData = ref(null);

    const chartOption = computed(() => option.value);

    const handleChartClick = (params) => {
      // 只处理系列类型的点击（例如柱状图）
      if (params.componentType === "series") {
        currentData.value = params;
        showModal.value = true;
        console.log("Chart clicked", currentData.value);
      }
    };

    return {
      chartOption,
      showModal,
      currentData,
      handleChartClick,
    };
  },
};
</script>

<style lang="less" scoped>
h1 {
  text-align: center;
}

.chart {
  width: 100%;
  height: 100%;
  pointer-events: auto; /* 改为auto以支持点击事件 */
}
</style>
